<template>
  <div>
    <el-container class="room-container">
      <el-header>
        <div class="header-container">
          <el-button type="primary" @click="toHall">退出房间</el-button>
          <span>{{ roomInfo.roomId }}号房间</span>
        </div>
      </el-header>
      <el-container>
        <el-main>
          <div class="left">
            <div
              class="seat"
              v-for="(player, index) in leftPlayerList"
              :key="player.name"
            >
              <img
                :src="player.avatar"
                alt=""
                style="width: 60px; height: 60px; border-radius: 50%"
              />
              <span class="username">{{ player.name }}</span>
              <span class="seat-number">{{ index + 1 }}</span>
              <span class="owner-signal" v-if="player.isRoomOwner === 1"
                >房主</span
              >
              <span class="die-sign" v-if="!player.alive">死亡</span>
            </div>
          </div>
          <div class="right">
            <div
              class="seat"
              v-for="(player, index) in rightPlayerList"
              :key="player.name"
            >
              <img
                :src="player.avatar"
                alt=""
                style="width: 60px; height: 60px; border-radius: 50%"
              />
              <span class="username">{{ player.name }}</span>
              <span class="seat-number">{{ index + 4 }}</span>
              <span class="owner-signal" v-if="player.isRoomOwner">房主</span>
              <span class="die-sign" v-if="!player.alive">死亡</span>
            </div>
          </div>
          <ul class="chat-container" ref="chatContainerRef">
            <li
              class="chat-item"
              v-for="(item, index) in roomInfo.chatList"
              :key="index"
            >
              <div class="player-info">
                <img
                  :src="
                    item.player
                      ? item.player.avatar
                      : '/src/assets/imgs/judge.jpg'
                  "
                  alt=""
                  style="width: 45px; height: 45px; border-radius: 50%"
                />
                <span class="username">{{ item.playerName }}</span>
                <span class="seat-sign" v-if="item.player">{{
                  item.player.seat
                }}</span>
              </div>
              <div class="chat-info" v-if="!item.type">
                <div class="chat-content">{{ item.content }}</div>
              </div>
              <div class="vote-result" v-else>
                <span v-for="(seat, index) in item.initiator_seat" :key="index">
                  {{ seat }}
                </span>
                <span>=></span>
                <span>{{ item.target_seat }}</span>
              </div>
            </li>
          </ul>
        </el-main>
      </el-container>
      <el-footer>
        <div class="role-card" v-if="roomInfo.gameStart">
          <div class="info-box">
            <img
              :src="roleImgs[playListData.playerInfo.role.roleName]"
              alt=""
              height="100"
              width="60"
            />
            <span
              ><strong>{{
                playListData.playerInfo.role.roleName
              }}</strong></span
            >
          </div>
          <div class="btn-box">
            <el-button
              type="primary"
              @click="roomInfo.voteDialogVisible = true"
              :disabled="!(roomInfo.gameStage === 'vote')"
              >投票<span v-if="roomInfo.gameStage === 'vote'"
                >({{ playerData.voteCount }})</span
              ></el-button
            >
            <el-button type="primary" @click="showActionDialog">{{
              actionTitle
            }}</el-button>
            <el-button
              type="primary"
              @click="roomInfo.teamateDialogVisible = true"
              :disabled="roomInfo.gameStage !== 'action'"
              v-if="playListData.playerInfo.roleId === 2"
              >队伍交流</el-button
            >
          </div>
        </div>
        <div class="footer-container">
          <el-button
            type="primary"
            @click="handleStartGame"
            v-if="playListData.isRoomOwner && !roomInfo.gameStart"
            >开始游戏</el-button
          >
          <div class="input-container">
            <el-input v-model="inputData.chat"></el-input>
            <el-button type="primary" @click="sendMessage">发送</el-button>
          </div>
        </div>
      </el-footer>
    </el-container>
    <el-dialog
      title="请确认身份"
      width="50%"
      v-model="roomInfo.roleDialogVisible"
    >
      <div class="role-dialog-container">
        <span
          >你的身份是
          <strong>{{ playListData.playerInfo.role.roleName }}</strong></span
        >
        <span>{{ playListData.playerInfo.role.roleDesc }}</span>
        <img
          :src="roleImgs[playListData.playerInfo.role.roleName]"
          alt=""
          height="400"
          width="250"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="roomInfo.roleDialogVisible = false">
            确定({{ roomInfo.count }})
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      title="开始行动"
      width="50%"
      v-model="roomInfo.actionDialogVisible"
    >
      <div
        class="action-container"
        v-if="playListData.playerInfo.role.roleName === '狼人'"
      >
        <span>请选择要击杀的玩家</span>
        <div class="player-list-box">
          <div
            class="player-item"
            v-for="(player, index) in playListData.playerList"
            :key="index"
          >
            <div class="info-box">
              <img :src="player.avatar" alt="" width="80" height="80" />
              <span class="player-name">{{ player.name }}</span>
            </div>
            <div class="operate-container">
              <el-button
                type="primary"
                @click="playerAction(player, 'werewolf', index)"
                :disabled="playerData.isActioned"
                >{{ actionTitle }}</el-button
              >
              <el-button
                type="primary"
                v-if="playerData.isAction[index]"
                @click="cancelAction(index)"
                >取消</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div
        class="action-container guard-action-container"
        v-if="playListData.playerInfo.role.roleName === '守卫'"
      >
        <span>请选择要守卫的玩家</span>
        <div class="player-list-box">
          <div
            class="player-item"
            v-for="(player, index) in playListData.playerList"
            :key="index"
          >
            <div class="info-box">
              <img :src="player.avatar" alt="" width="80" height="80" />
              <span class="player-name">{{ player.name }}</span>
            </div>
            <div class="operate-container">
              <el-button
                type="primary"
                @click="playerAction(player, 'guard', index)"
                :disabled="playerData.isActioned"
                >{{ actionTitle }}</el-button
              >
              <el-button
                type="primary"
                v-if="playerData.isAction[index]"
                @click="cancelAction(index)"
                >取消</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div
        class="action-container seer-action-container"
        v-if="playListData.playerInfo.role.roleName === '预言家'"
      >
        <span>请选择要查询的玩家</span>
        <div class="player-list-box">
          <div
            class="player-item"
            v-for="(player, index) in playListData.playerList"
            :key="index"
          >
            <div class="info-box">
              <img :src="player.avatar" alt="" width="80" height="80" />
              <span class="player-name">{{ player.name }}</span>
            </div>
            <div class="operate-container">
              <el-button
                type="primary"
                @click="handleSeerAction(player)"
                :disabled="playerData.isActioned"
                >{{ actionTitle }}</el-button
              >
            </div>
          </div>
        </div>
        <div class="result-container">
          <span>他的身份是: {{ playerData.seerResult }}</span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="roomInfo.actionDialogVisible = false"
          >
            确定<span>({{ playerData.actionCount }})</span>
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="投票" width="50%" v-model="roomInfo.voteDialogVisible">
      <span>请选择要投出的玩家</span>
      <div class="player-list-box">
        <div
          class="player-item"
          v-for="(player, index) in playListData.playerList"
          :key="index"
        >
          <div class="info-box">
            <img :src="player.avatar" alt="" width="80" height="80" />
            <span class="player-name">{{ player.name }}</span>
          </div>
          <div class="operate-container">
            <el-button
              type="primary"
              @click="playerAction(player, 'vote', index)"
              :disabled="playerData.isActioned"
              >投出</el-button
            >
            <el-button
              type="primary"
              v-if="playerData.isAction[index]"
              @click="cancelAction(index)"
              >取消</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="结果"
      width="50%"
      v-model="roomInfo.settleDialogVisible"
      center
    >
      <span>{{ roomInfo.settleResult.content }}</span>
      <div class="settle-box" v-if="roomInfo.settleResult.player">
        <img
          :src="roomInfo.settleResult.player.avatar"
          alt=""
          style="width: 60px; height: 60px; border-radius: 50%"
        />
        <span class="username">{{ roomInfo.settleResult.player.name }}</span>
        <span class="seat-number">{{ roomInfo.settleResult.player.seat }}</span>
        <span class="die-sign">死亡</span>
      </div>
    </el-dialog>

    <el-dialog
      title="队内聊天"
      width="50%"
      v-model="roomInfo.teamateDialogVisible"
    >
      <div class="teammate-container">
        <div class="teammate-box">
          <div
            class="teammate-item"
            v-for="(teammate, index) in playerData.teammateList"
            :key="index"
          >
            <img
              :src="teammate.avatar"
              alt=""
              style="width: 60px; height: 60px; border-radius: 50%"
            />
            <span>{{ teammate.name }}</span>
            <span class="seat">{{ teammate.seat }}</span>
          </div>
        </div>
        <div>
          <ul class="chat-container">
            <li
              class="chat-item"
              v-for="(item, index) in playerData.teammateChatList"
              :key="index"
            >
              <div class="player-info">
                <img
                  alt=""
                  style="width: 45px; height: 45px; border-radius: 50%"
                  :src="item.player.avatar"
                />
                <span class="username">{{ item.player.name }}</span>
              </div>
              <div class="chat-info">
                <div class="chat-content">{{ item.content }}</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="input-container">
          <el-input v-model="inputData.teamChat"></el-input>
          <el-button type="primary" @click="sendTeamMessage">发送</el-button>
        </div>
      </div>
    </el-dialog>
    <div class="bg"></div>
  </div>
</template>

<script setup>
import { onMounted, reactive, computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getRoomMessage } from '../../api/api.js'
// import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'

// const store = useStore()

const chatContainerRef = ref(null)

const route = useRoute()
const router = useRouter()

const playListData = reactive({
  playerList: [],
  playerCount: 1,
  playerInfo: {},
  isRoomOwner: false,
  userInfo: JSON.parse(sessionStorage.getItem('userinfo')),
})

const playerData = reactive({
  actionTitle: '',
  seerResult: '',
  isActioned: false,
  actionObj: {},
  actionTimer: null,
  actionCount: 60,
  voteTimer: null,
  voteCount: 30,
  chatTimer: null,
  chatCount: 60,
  lastwordTimer: null,
  lastwordCount: 30,
  teammateList: [],
  teammateChatList: [],
  isAction: [false, false, false, false, false, false],
})

const roleImgs = reactive({
  村民: '/src/assets/imgs/people.jpeg',
  狼人: '/src/assets/imgs/wolf.jpeg',
  守卫: '/src/assets/imgs/guard.jpeg',
  预言家: '/src/assets/imgs/seer.jpeg',
})

const inputData = reactive({
  chat: '',
  teamChat: '',
})

const roomInfo = reactive({
  roomId: '',
  socket: null,
  chatList: [],
  roleDialogVisible: false,
  actionDialogVisible: false,
  settleDialogVisible: false,
  voteDialogVisible: false,
  teamateDialogVisible: false,
  info: {},
  gameStart: false,
  count: 3,
  interval: null,
  gameStage: '',
  werewolfStage: false,
  seerStage: false,
  guardStage: false,
  settleResult: {},
})

const sendMessage = () => {
  const messageObj = {
    type: 'chat',
    content: inputData.chat,
  }
  roomInfo.socket.send(JSON.stringify(messageObj))
  inputData.chat = ''
}

const toHall = () => {
  router.push('/home')
}

const leftPlayerList = computed({
  get() {
    return playListData.playerList.length > 2
      ? playListData.playerList.slice(0, 3)
      : playListData.playerList.slice(0, playListData.playerList.length)
  },
})

const rightPlayerList = computed({
  get() {
    return playListData.playerList.length > 3
      ? playListData.playerList.slice(3)
      : []
  },
})

const actionTitle = computed({
  get() {
    switch (playListData.playerInfo.role.roleName) {
      case '村民':
        return '投票'
      case '狼人':
        return '刀人'
      case '守卫':
        return '守卫'
      case '预言家':
        return '查身份'
    }
  },
})

onMounted(async () => {
  if (!roomInfo.roomId) {
    roomInfo.roomId = route.params.id
  }

  const socket = new WebSocket(
    `ws://localhost:8080/websocket?username=${playListData.userInfo.username}&roomId=${roomInfo.roomId}`
  )

  roomInfo.socket = socket

  socket.onmessage = (e) => {
    const message = JSON.parse(e.data)
    if (message.messageType === 'SYSTEM') {
      if (message.msg === 'role') {
        const playerInfo = JSON.parse(message.content)
        playListData.playerInfo = playerInfo
        gameStart()
        roomInfo.gameStart = true
        return
      }
      if (message.msg === '房间信息') {
        roomInfo.info = JSON.parse(message.content)
        playListData.playerList = JSON.parse(roomInfo.info.playerList)
        playListData.playerCount = playListData.playerList.length
        playListData.isRoomOwner =
          roomInfo.info.roomOwner === playListData.userInfo.username
        return
      }
      roomInfo.chatList.push(message)
    }
    if (message.messageType === 'JUDGE') {
      if (message.msg === '黑夜') {
        setTimeout(() => {
          sendRoomStage('action')
          playerData.actionTimer = setInterval(() => {
            playerData.actionCount--
            if (playerData.actionCount <= 0) {
              playerData.actionCount = 10
              roomInfo.actionDialogVisible = false
              settlement()
              clearInterval(playerData.actionTimer)
            }
          }, 1000)
        }, 1000)
        roomInfo.chatList.push(message)
        return
      }
      if (message.msg === '游戏开始') {
        roomInfo.chatList.push(message)
        return
      }
      if (message.msg === '白天') {
        playerData.isActioned = false
        roomInfo.chatList.push(message)
        if (playListData.isRoomOwner) {
          setTimeout(() => {
            sendRoomStage('settle')
          }, 1000)
        }
        return
      }
      if (message.msg === '开始行动') {
        roomInfo.chatList.push(message)
        return
      }
      if (message.msg === '队友') {
        playerData.teammateList = JSON.parse(message.content)
        return
      }
      if (message.msg === '投票') {
        roomInfo.chatList.push(message)
        playerData.voteTimer = setInterval(() => {
          playerData.voteCount--
          if (playerData.voteCount <= 0) {
            playerData.voteCount = 10
            clearInterval(playerData.voteTimer)
            settlement()
          }
        }, 1000)
        return
      }
      if (message.msg === '投票结果') {
        const voteResult = JSON.parse(message.content)
        roomInfo.settleResult = voteResult
        roomInfo.settleDialogVisible = true
        const voteList = voteResult.voteList
        if (roomInfo.gameStage === 'gameover') {
          setTimeout(() => {
            roomInfo.settleDialogVisible = false
          }, 2000)
          return
        }
        voteList.forEach((vote) => {
          roomInfo.chatList.push({
            playerName: '法官',
            type: 'vote',
            target_seat: vote.target_seat,
            initiator_seat: vote.initiator_seat,
          })
        })
        setTimeout(() => {
          roomInfo.settleDialogVisible = false
          sendRoomStage('singleChat')
        }, 3000)
      }
      if (message.msg === '查询成功') {
        playerData.seerResult = message.content
        playerData.isActioned = true
        return
      }
      if (message.msg === '发言') {
        roomInfo.chatList.push(message)
        playerData.chatTimer = setInterval(() => {
          playerData.chatCount--
          if (playerData.chatCount <= 0) {
            playerData.chatCount = 10
            clearInterval(playerData.chatTimer)
            setTimeout(() => {
              sendRoomStage('vote')
            }, 1000)
          }
        }, 1000)
        return
      }
      if (message.msg === '被刀遗言') {
        roomInfo.chatList.push(message)
        setTimeout(() => {
          playerData.lastwordTimer = setInterval(() => {
            playerData.lastwordCount--
            if (playerData.lastwordCount <= 0) {
              playListData.lastwordCount = 10
              sendRoomStage('chat')
              clearInterval(playerData.lastwordTimer)
            }
          }, 1000)
        }, 1000)
        return
      }
      if (message.msg === '出局遗言') {
        roomInfo.chatList.push(message)
        setTimeout(() => {
          playerData.lastwordTimer = setInterval(() => {
            playerData.lastwordCount--
            console.log(playerData.lastwordCount)
            if (playerData.lastwordCount <= 0) {
              console.log(playerData.lastwordCount)
              playerData.lastwordCount = 10
              clearInterval(playerData.lastwordTimer)
              sendRoomStage('night')
            }
          }, 1000)
        }, 1000)
        return
      }
      if (message.msg === 'settle') {
        const settleObj = JSON.parse(message.content)
        roomInfo.settleResult = settleObj
        roomInfo.settleDialogVisible = true
        if (settleObj.msg === '平安夜') {
          roomInfo.chatList.push({
            player_name: '法官',
            content: settleObj.content,
          })
          setTimeout(() => {
            roomInfo.settleDialogVisible = false
            setTimeout(() => {
              sendRoomStage('chat')
            }, 1000)
          }, 3000)
          return
        }
        if (settleObj.msg === '玩家死亡') {
          playListData.playerList = settleObj.playerList
          setTimeout(() => {
            roomInfo.settleDialogVisible = false
          }, 3000)
          if (roomInfo.gameStage === 'gameover') {
            return
          }
          sendRoomStage('diedChat')
          return
        }
      }
      if (message.msg === '游戏结束') {
        roomInfo.chatList.push(message)
        roomInfo.gameStage = 'gameover'
        return
      }
    }
    if (message.messageType === 'CHAT') {
      if (message.msg === '队内聊天') {
        console.log(message)
        playerData.teammateChatList.push(message)
        return
      }
      roomInfo.chatList.push(message)
      return
    }
  }
  const { data: response } = await getRoomMessage(roomInfo.roomId)
  roomInfo.chatList = response.data
  roomInfo.chatList.forEach((chat) => {
    if (chat.content.startsWith('{')) {
      chat.content = JSON.parse(chat.content).content
    }
  })
  chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
})

watch(
  () => roomInfo.chatList.length,
  () => {
    setTimeout(() => {
      // 滚动到底部
      chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
    }, 0)
  }
)

const gameStart = () => {
  roomInfo.roleDialogVisible = true
  roomInfo.chatList = []
  setTimeout(() => {
    sendRoomStage('night')
    if (playListData.playerInfo.roleId === 2) {
      findTeammate()
    }
  }, 3000)
  roomInfo.interval = setInterval(() => {
    roomInfo.count--
    if (roomInfo.count <= 0) {
      roomInfo.roleDialogVisible = false
      clearInterval(roomInfo.interval)
    }
  }, 1000)
}

const handleStartGame = () => {
  // if (playListData.playerCount < 6) {
  //   return ElMessage.error('玩家数量必须不少于6个才能开始游戏')
  // }

  sendRoomStage('start')
}

const sendRoomStage = (stage) => {
  roomInfo.gameStage = stage
  if (!playListData.isRoomOwner) {
    return
  }
  const stageObj = {
    type: 'stage',
    content: stage,
  }
  roomInfo.socket.send(JSON.stringify(stageObj))
}

const showActionDialog = () => {
  roomInfo.actionDialogVisible = true
}

const playerAction = (player, type, index) => {
  playerData.actionObj = {
    type: 'token',
    content: JSON.stringify({
      token_type: type,
      target_id: player.id,
      prime_id: playListData.playerInfo.id,
    }),
  }
  playerData.isAction[index] = true
  playerData.isActioned = true
}

const handleSeerAction = (player) => {
  playerData.actionObj = {
    type: 'token',
    content: JSON.stringify({
      token_type: 'seer',
      target_id: player.id,
      prime_id: playListData.playerInfo.id,
    }),
  }
  playerData.isActioned = true
  roomInfo.socket.send(JSON.stringify(playerData.actionObj))
  playerData.actionObj = {}
}

const cancelAction = (index) => {
  playerData.isActioned = false
  playerData.isAction[index] = false
  playerData.actionObj = {}
}

const settlement = () => {
  if (playerData.actionObj.content) {
    roomInfo.socket.send(JSON.stringify(playerData.actionObj))
    playerData.actionObj = {}
  }
  if (!playListData.isRoomOwner) {
    return
  }
  if (roomInfo.gameStage === 'vote') {
    sendRoomStage('settleVote')
    return
  }
  setTimeout(() => {
    sendRoomStage('day')
    roomInfo.gameStage = 'day'
  }, 1000)
}

const sendTeamMessage = () => {
  const teamMessageObj = {
    type: 'teamChat',
    content: inputData.teamChat,
  }
  roomInfo.socket.send(JSON.stringify(teamMessageObj))
  inputData.teamChat = ''
}

const findTeammate = () => {
  const findTeammateObj = {
    type: 'teammate',
    content: '',
  }
  roomInfo.socket.send(JSON.stringify(findTeammateObj))
}
</script>

<style>
/* 省略样式部分 */
.room-container {
  display: flex;
  height: 100vh;
}

.header-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.room-container .left {
  border-radius: 20px;
  position: fixed;
  left: 5%;
  top: 20%;
  background-color: rgb(197, 224, 225);
}

.room-container .right {
  border-radius: 20px;
  background-color: rgb(197, 224, 225);
  position: fixed;
  right: 5%;
  top: 20%;
}

.room-container .left,
.room-container .right {
  display: flex;
  flex-direction: column;
}

.room-container .seat {
  position: relative;
  padding: 10px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  color: #3c3232;
}

.room-container .seat .seat-number {
  position: absolute;
  right: 5px;
  background-color: rgb(19, 219, 238);
  color: white;
  padding: 2px 5px;
  border-radius: 50%;
  font-size: 12px;
}

.seat .owner-signal {
  position: absolute;
  right: -10%;
  bottom: 25%;
  font-size: 12px;
}

.seat .die-sign {
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  color: rgb(81, 207, 188);
  left: 20%;
  top: 25%;
}

.room-container .seat .username {
  text-align: center;
  font-size: 20px;
}

.footer-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
  gap: 20px;
  margin-bottom: 30px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.footer-container .input-container {
  display: flex;
}

.chat-container {
  width: 50%;
  gap: 10px;
  height: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  overflow: scroll;
  scroll-behavior: smooth;
  align-items: start;
}

.chat-container::-webkit-scrollbar {
  display: none;
}

.chat-container .chat-item {
  width: 90%;
  padding: 10px;
  display: flex;
  gap: 5px;
  justify-content: start;
  align-items: start;
}

.chat-container .chat-item .player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.chat-item .chat-info .chat-content {
  margin-top: 5px;
  margin-left: 10px;
  background-color: #f9f9f9;
  font-size: 18px;
  line-height: 30px;
  text-align: start;
  padding: 6px 10px;
  border-radius: 10px;
}

.chat-item .vote-result {
  margin-top: 5px;
  margin-left: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  background-color: #c7b3b3;
  border-radius: 10px;
  padding: 6px 10px;
}

.chat-item .vote-result span {
  margin: 0 10px;
  font-size: 20px;
  line-height: 30px;
  background-color: #d1cd6c;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  text-align: center;
}

.chat-item .player-info .seat-sign {
  color: white;
  background-color: rgb(20, 179, 248);
  position: absolute;
  border-radius: 50%;
  right: -25%;
  bottom: 20%;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.role-dialog-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.role-card {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  left: 10px;
  bottom: 10px;
  gap: 50px;
}

.role-card .info-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.player-list-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.player-item {
  display: flex;
  width: 40%;
  padding: 10px;
  align-items: center;
  gap: 20px;
}

.info-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.info-box img {
  border-radius: 10px;
}

.settle-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.settle-box .seat-number {
  position: absolute;
  right: 45%;
  top: 10%;
  background-color: rgb(15, 182, 237);
  color: rgb(255, 255, 255);
  padding: 2px 5px;
  border-radius: 50%;
  font-size: 12px;
}

.settle-box .die-sign {
  position: absolute;
  right: 40%;
  bottom: 10%;
  background-color: rgb(161, 168, 161);
  color: red;
  padding: 2px 5px;
  border-radius: 50%;
  font-size: 12px;
}

.teammate-container {
  display: flex;
  gap: 20px;
  position: relative;
}

.teammate-container .teammate-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
  position: relative;
}

.teammate-container .teammate-item .seat {
  position: absolute;
  top: 0;
  right: 0;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background-color: aquamarine;
  text-align: center;
  font-size: 16px;
  line-height: 18px;
}

.teammate-container .input-container {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.teammate-container .chat-container {
  width: 100%;
}

.bg {
  height: 100%;
  width: 100%;
  z-index: -1;
  position: fixed;
  opacity: 0.4;
  top: 0;
  left: 0;
  background-image: url(/src/assets/imgs/bg.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
